<template>
  <el-card style="margin: 10px 0px">
    <!--中间卡片顶部结构-->
    <div class="container">
      <!--左侧选项卡-->
      <el-tabs class="demo-tabs" v-model="activeName">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visite"></el-tab-pane>
      </el-tabs>
      <!--右侧的结构:日历-->
      <div class="left">
        <span @click="setToday">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMonth">本月</span>
        <span @click="setYear">本年</span>
        <el-date-picker
          v-model="timeArr"
          type="daterange"
          value-format="YYYY-MM-DD"
          range-separator="-"
          start-placeholder="入住时间"
          end-placeholder="离开时间"
          size="small"
        />
      </div>
    </div>
    <!--中间卡片底部结构-->
    <el-row :gutter="10">
      <el-col :span="18">
        <!-- 柱状图 -->
        <v-chart style="height: 300px" :option="getOption()"></v-chart>
      </el-col>
      <el-col :span="6">
        <h4 class="title">
          门店{{ activeName == "sale" ? "销售额" : "访问量" }}排名
        </h4>
        <!-- 各大门店排行榜的数据 -->
        <ul v-show="activeName=='sale'">
          <li v-for="(item, index) in data.orderRank" :key="index">
            <span :class="{ active: index < 3 }">{{ item.no }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </li>
        </ul>
        <ul v-show="activeName=='visite'">
          <li v-for="(item, index) in data.userRank" :key="index">
            <span :class="{ active: index < 3 }">{{ item.no }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
//引入dayjs插件
import dayjs from "dayjs";
//选项卡收集的数据
let activeName = ref("sale");
//收集日历的数据
let timeArr = ref([]);
//今日
const setToday = () => {
  //获取当前日期时间(年月日)
  let start = dayjs().format("YYYY-MM-DD");
  let end = dayjs().format("YYYY-MM-DD");
  timeArr.value = [start, end];
};
//本周
const setWeek = () => {
  //获取当前日期时间(年月日)
  let start = dayjs().day(0).format("YYYY-MM-DD");
  let end = dayjs().day(-6).format("YYYY-MM-DD");
  timeArr.value = [start, end];
};
//本月
const setMonth = () => {
  //获取当前日期时间(年月日)
  let start = dayjs().startOf("month").format("YYYY-MM-DD");
  let end = dayjs().endOf("month").format("YYYY-MM-DD");
  timeArr.value = [start, end];
};
//本年
const setYear = () => {
  //获取当前日期时间(年月日)
  let start = dayjs().startOf("year").format("YYYY-MM-DD");
  let end = dayjs().endOf("year").format("YYYY-MM-DD");
  timeArr.value = [start, end];
};

//柱状图的配置对象函数
const getOption = () => {
  return {
    //标题组件
    title: {
      text: activeName.value == "sale" ? "销售额" : "访问量",
      left: "45%",
      textStyle: {
        color: "yellowgreen",
      },
    },
    //提示框
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    //布局组件
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    //x轴组件
    xAxis: [
      {
        type: "category",
        data: props.data.orderFullYearAxis,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    //y轴组件
    yAxis: [
      {
        type: "value",
        axisLine: {
          show: true,
        },
        axisTick: {
          show: true,
        },
      },
    ],
    //系列
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data:
          activeName.value == "sale"
            ? props.data.orderFullYear
            : props.data.userFullYear,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        label: {
          show: true,
          position: "top",
          color: "yellowgreen",
        },
      },
    ],
  };
};

let props = defineProps(["data"]);
</script>

<style scoped>
.container {
  position: relative;
}
.left {
  position: absolute;
  top: 0px;
  right: 0px;
}
.left span {
  color: yellowgreen;
  margin: 0px 10px;
}
.title {
  color: yellowgreen;
}

ul {
  list-style: none;
}
ul li {
  margin: 20px 0px;
  display: flex;
  justify-content: space-between;

}
span.active {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  background: black;
  color: white;
    font-weight: 900;
}
::v-deep .el-tabs__item{
  color:yellowgreen;
}
</style>